<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>用户主页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes"/>
    <meta name="browsermode" content="application"/>
    <meta name="x5-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="x5-page-mode" content="app"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"/>
    <link rel="stylesheet" href="./resources/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./resources/css/bootstrap-vue.min.css"/>
    <link rel="stylesheet" href="./resources/css/dashboard.css"/>
    
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      
      
      

    </style>
    
  </head>

<body>
<nav class="navbar   bg-primary navbar-dark fixed-top  flex-md-nowrap p-0 shadow"> <!-- bg-info -->
  <a class="navbar-brand bg-primary col-sm-3 col-md-2 mr-0" href="#">springboot2 vue</a>
  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  <ul class="navbar-nav px-3">
    <li class="nav-item text-nowrap">
      <a class="nav-link" href="#">登出</a>
    </li>
  </ul>
</nav>

<div class="container-fluid" id="app">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <!-- 循环出菜单 -->
           <li class="nav-item"  v-for="(obj,index) in menus"> 
             <a :class="['nav-link',{'active': obj.isActive },{'bg-light':obj.isActive} ]" href="#"  @click="go(obj)">
              <span :data-feather="obj.icon"></span>
               {{obj.name}}
             </a>
           </li>
        </ul>
      </div>
    </nav>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
    <!--aspect="1by1"   aspect ratios are: 21by9 (21:9), 16by9 (16:9) 4by3  -->
      <b-embed id="iframe"
	    type="iframe"
	    aspect="1by1"
	    src="/home.html"
	    allowfullscreen
      ></b-embed> 
    </main>
  </div>
</div>


<script src ="./resources/js/vue.min.js"></script>
<script src ="./resources/js/bootstrap-vue.min.js"></script>
<script src ="./resources/js/axios.min.js"></script>
<script src ="./resources/js/vue-axios.min.js"></script>
<script src ="./resources/js/app.js"></script>

<!-- <script src="./resources/main/jquery-3.3.1.slim.min.js" </script> 
<script src="./resources/main/bootstrap.bundle.min.js" ></script>-->
<script src="./resources/main/feather.min.js"></script>

<script type="text/javascript">

new Vue({
	   el   : '#app',
	   mounted:function(){
		   this.reloadMenus(); 
	   },
	   data:{
		   menus:[
			   /*
			    {name:'首页 '   ,icon:'home',link:'/home.html',isActive:true}
			   ,{name:'DEMO' ,icon:'file',link:'/demo/list.html',isActive:false}
			   ,{name:'DEMO1',icon:'shopping-cart',link:'/demo/list.html',isActive:false}
			   ,{name:'DEMO2',icon:'users',link:'/demo/list.html',isActive:false}
			   ,{name:'DEMO3',icon:'bar-chart-2',link:'/demo/list.html',isActive:false}
			   ,{name:'DEMO4',icon:'layers',link:'/demo/list.html',isActive:false}
			   */
		   ]
	   },
	   methods:{
		  go:function(m){
			  document.getElementById('iframe').src=m.link;
			  this.menus.forEach((item)=>{
				 //第一个参数是要修改的数据, 第二个值是修改当前数组的哪一个字段,第三个是要修改为什么值
				 this.$set(item, 'isActive', item.name==m.name);
			  })
		  },
		  reloadMenus:function (){
			  this.menus=[
				   {name:'首页 '      ,icon:'home',link:'/home.html',isActive:true}
				  ,{name:'页面模板 '   ,icon:'home',link:'http://html.phoenixcoded.net/mega-able/default/index.html'}
			  ];
			  this.$http.post("reloadMenus",{}).then((result)=> {
				  //console.log(result);
				  result.list.forEach(item=>this.menus.push(item));
				  feather.replace();//替换图标
			  });
		  }
	   }
	   
});
</script>
</body>
</html>
